<template>
  <div class="find">
    <div class="top">
      <div class="avatar">
        <img v-if="islogin" :src="this.img" />
        <img v-else src="../../public/0.png" />
      </div>
      <div>发现</div>
    </div>
    <!-- 置顶 -->
    <div class="article" v-for="(item, i) in findtop" :key="i">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="selebox">
          <div class="nick">
            <img :src="item.ft_avatar" />
            <div class="nickname">
              <a href="#">{{ item.ft_uname }}</a>
              <p>{{ item.ft_autograph }}</p>
            </div>
          </div>
          <div class="focus">
            <div>置顶</div>
          </div>
        </div>
        <div class="nickphoto">
          <p>{{ item.ft_content }}</p>
          <div class="date">{{ item.ft_date }}</div>
          <div class="photo">
            <div v-for="(item, i) in imagetop" :key="i">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                :src="`/${item}`"
              />
            </div>
          </div>
        </div>
        <div class="chat">
          <div class="comment">
            <a href="javascript:;"
              ><van-icon class="img" name="like-o" size="20px" /> 12</a
            >
            <router-link :to="`/details?ftid=${item.ftid}`"
              ><van-icon class="img" name="chat-o" size="20px" />
              32</router-link
            >
          </div>
          <div class="more">
            <router-link :to="`/details?ftid=${item.ftid}`">···</router-link>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <!-- 数据库遍历 -->
    <div class="article" v-for="(item, i) in find" :key="i + 1">
      <div class="selebox">
        <div class="nick">
          <img :src="item.f_avatar" />
          <div class="nickname">
            <a href="#">{{ item.f_uname }}</a>
            <p>{{ item.f_autograph }}</p>
          </div>
        </div>
      </div>
      <div class="nickphoto">
        <p>{{ item.f_content }}</p>
        <div class="date">{{ item.f_date }}</div>
        <div class="photo">
          <div v-for="(iimage, k) in image[i]" :key="k">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              :src="`/${iimage}`"
            />
          </div>
        </div>
      </div>
      <div class="chat">
        <div class="comment">
          <a href="javascript:;">
            <van-icon class="img" name="like-o" size="20px" /> 12</a
          >
          <router-link :to="`/detailsd?fid=${item.fid}`">
            <van-icon class="img" name="chat-o" size="20px" /> 32
          </router-link>
        </div>
        <div class="more">
          <router-link :to="`/detailsd?fid=${item.fid}`">···</router-link>
        </div>
      </div>
    </div>
    <!-- 发布动态 -->
    <router-link to="/dynamic" class="release"></router-link>
    <!-- 底线 -->
    <div class="bottom">······已经到底了······</div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      islogin: false,
      user: [],
      img: "",
      find: [],
      finds: [],
      image: [],
      images: [],
      findtop: [],
      imagetop: [],
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.loadFind();
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    // 展示发现
    loadFind() {
      this.axios.get("/find/find").then((result) => {
        this.find = result.data.data;
        this.find.forEach((item) => {
          if (item.f_img_src) {
            this.images = item.f_img_src.split(",");
            this.image.push(this.images);
          }
        });
        this.axios.get("/user/checkuid").then(result=>{
          this.finds=result.data.data;
          this.find.forEach(event=>{
            for(let item in this.finds){
              if(this.finds[item].uid==event.userId){
                event.f_avatar=this.finds[item].avatar
              }
            }
          })
        })
      });
    },
    // 展示置顶
    loadFindtop() {
      this.axios.get("/findtop/findtop").then((result) => {
        this.findtop = result.data.data;
        this.imagetop = result.data.data;
        this.imagetop.forEach((item) => {
          this.imagetop = item.ft_img_src.split(",");
        });
      });
    },
    // 登录头像
    avatar() {
      this.axios.get("/user/checkuid/" + this.uid).then((result) => {
        this.user = result.data.data;
        let imgPath = this.user.avatar;
        this.img = "/" + imgPath;
      });
    },
    show() {
      if (sessionStorage.getItem("islogin")) {
        this.islogin = true;
      } else this.islogin = false;
    },
  },
  mounted() {
    this.loadFind();
    this.avatar();
    this.show();
    this.loadFindtop();
    // this.loadimage();
  },
};
</script>

<style>
.find {
  padding: 70px 0 100px 0;
}
/* 头部 */
.find .top {
  width: 90%;
  padding: 2% 20px;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
  z-index: 99;
}
.find .avatar > img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 40px;
}
.find .avatar + div {
  font-size: 18px;
  font-weight: 600;
  margin: 0 auto;
}
/* 列表头 */
.find .article {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding: 10px 0 20px 0;
}
.find .selebox {
  width: 90%;
  padding: 10px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.find .selebox > .nick {
  display: flex;
}
.find .nick > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-right: 10px;
}
.find .nickname {
  padding-top: 5px;
  text-align: left;
}
.find .nickname > a {
  font-size: 16px;
  color: #333;
}
.find .nickname > p {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 10px;
}

.find .focus {
  margin-right: 0;
}
.find .focus > div {
  width: 50px;
  border-radius: 26px;
  height: 26px;
  background-color: #dc3545;
  color: #fff;
  margin-right: 20px;
  line-height: 26px;
}
.find .btn {
  width: 50px;
  height: 26px;
  padding: 0 10px;
  background-color: #efefef;
  color: #007bff;
  font-size: 12px;
  z-index: -10;
}

.find .nickphoto > p {
  margin-top: 20px;
  text-align: left;
  padding: 0 15px;
  font-size: 14px;
  white-space: pre-wrap;
}
.find .date {
  text-align: right;
  width: 95%;
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}
.find .nickphoto > .photo {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.find .photo > div {
  width: 32%;
  height: 100px;
  margin-top: 10px;
}
.find .photo > div img {
  border-radius: 10px;
}
.find .chat {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.find .comment {
  text-align: left;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.find .comment > a {
  color: #999;
  margin-right: 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.find .more {
  margin-right: 20px;
}
.find .more a {
  display: block;
  width: 30px;
  font-size: 20px;
  height: 16px;
  line-height: 16px;
  border-radius: 16px;
  color: #999;
  background-color: #eee;
}
/* 发布按钮 */
.find .release {
  width: 45px;
  height: 45px;
  position: fixed;
  bottom: 13%;
  right: 8%;
  border-radius: 50%;
  background: #007bff url(../assets/publish.png) no-repeat 12px;
  background-size: 20px;
  box-shadow: 0 0 10px #333;
}
.find .bottom {
  color: #aaa;
  margin-top: 20px;
}
</style>
